
import React from 'react';
import PropTypes from 'prop-types';
import {injectIntl} from './intl';
import {Card, Row, Col, Divider, Table} from 'antd';
import {DATETIME_FORMAT, FILES_API, TABLE} from '../constants';
import {formatDateTime, conventEnumValueToString, formatAmount} from '../utils';
import {expenseAdjustmentBillSourceType, expenseAdjustmentDirection,
    expenseAdjustmentStatus, expenseAdjustmentSettleStatus, claimSettlementResult} from '../Enum';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
const {Description} = DescriptionList;
import styles from './style.css';
/* eslint-disable react/prefer-stateless-function */
class Detail extends React.PureComponent {
    state = {
        hasOperat: false
    }
    onChangeUpload = data => {
        if(!this.state.hasOperat)
            this.setState({
                hasOperat: true
            });
        this.props.updateAttachments(data);
    }
    render() {
        const {laborFee = 0, materialFee = 0, mgmtFee = 0, otherFee = 0, assistantFee = 0, adjustmentFee = 0,
            attachments = [], piAttachments = [], details = [], expenseAdjustmentResultDetails = []} = this.props.detail;
        const fileList = attachments.map(item => (<Description key={item.fileId}><a icon="download" href={`${FILES_API.files}/${item.fileId}`} size="small">
            {item.fileName}</a></Description>));
        const piFileList = piAttachments.map(item => (<Description key={item.fileId}><a icon="download" href={`${FILES_API.files}/${item.fileId}`} size="small">
            {item.fileName}</a></Description>));
        const columns = [
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.sourceCode',
                    defaultMessage: '源单据编号'
                }),
                dataIndex: 'sourceCode'
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.vin',
                    defaultMessage: 'VIN'
                }),
                dataIndex: 'vin'
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.productCategoryCode',
                    defaultMessage: '车型'
                }),
                dataIndex: 'productCategoryCode'
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.laborFee',
                    defaultMessage: '工时费'
                }),
                dataIndex: 'laborFee',
                render: text => formatAmount(text)
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.materialFee',
                    defaultMessage: '材料费'
                }),
                dataIndex: 'materialFee',
                render: text => formatAmount(text)
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.mgmtFee',
                    defaultMessage: '管理费'
                }),
                dataIndex: 'mgmtFee',
                render: text => formatAmount(text)
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.otherFee',
                    defaultMessage: '其他费用'
                }),
                dataIndex: 'otherFee',
                render: text => formatAmount(text)
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.assistantFee',
                    defaultMessage: '辅料费用'
                }),
                dataIndex: 'assistantFee',
                render: text => formatAmount(text)
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.totalFee',
                    defaultMessage: '金额合计'
                }),
                dataIndex: 'totalFee',
                render: text => formatAmount(text)
            }
        ];
        const moreColumns = [
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.approverName',
                    defaultMessage: '审核人'
                }),
                dataIndex: 'approverName'
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.result',
                    defaultMessage: '审核结果'
                }),
                dataIndex: 'result',
                render: text => conventEnumValueToString(claimSettlementResult, text)
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.approveComment',
                    defaultMessage: '审核意见'
                }),
                dataIndex: 'approveComment'
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.approveTime',
                    defaultMessage: '审核时间'
                }),
                dataIndex: 'approveTime',
                render: text => formatDateTime(text, DATETIME_FORMAT)
            }
        ];
        return (
            <div>
                <Card>
                    <DescriptionList size="large" title={<Row><Col span={6}>{this.props.intl.formatMessage({
                        id: 'commonDetail.expenseAdjustment.title',
                        defaultMessage: '扣补款信息'
                    })}</Col>
                    <Col className={styles.optionBtn} span={18}>{this.props.operations}</Col></Row>}>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.code',
                                defaultMessage: '扣补款单号'
                            })}>
                            {this.props.detail.code}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.dealerCode',
                                defaultMessage: '服务站编号'
                            })}>
                            {this.props.detail.dealerCode}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.direction',
                                defaultMessage: '扣补款方向'
                            })}>
                            {conventEnumValueToString(expenseAdjustmentDirection, this.props.detail.direction)}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.sourceType',
                                defaultMessage: '源单据类型'
                            })}>
                            {conventEnumValueToString(expenseAdjustmentBillSourceType, this.props.detail.sourceType)}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.status',
                                defaultMessage: '状态'
                            })}>
                            {conventEnumValueToString(expenseAdjustmentStatus, this.props.detail.status)}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.settlementStatus',
                                defaultMessage: '结算状态'
                            })}>
                            {conventEnumValueToString(expenseAdjustmentSettleStatus, this.props.detail.settlementStatus)}
                        </Description>
                    </DescriptionList>
                    <DescriptionList col={1} size="large">
                        <Description term={this.props.intl.formatMessage({
                            id: 'commonDetail.info.reason',
                            defaultMessage: '扣补款原因'
                        })}>
                            {this.props.detail.reason}
                        </Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'commonDetail.info.remark',
                            defaultMessage: '备注'
                        })}>
                            {this.props.detail.remark}
                        </Description>
                    </DescriptionList>
                </Card>
                <Card>
                    <DescriptionList size="large" title={this.props.intl.formatMessage({
                        id: 'commonDetail.fee.title',
                        defaultMessage: '费用信息'
                    })}>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.laborFee',
                                defaultMessage: '工时费'
                            })}>
                            {formatAmount(laborFee)}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.materialFee',
                                defaultMessage: '材料费'
                            })}>
                            {formatAmount(materialFee)}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.mgmtFee',
                                defaultMessage: '管理费'
                            })}>
                            {formatAmount(mgmtFee)}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.otherFee',
                                defaultMessage: '其他费用'
                            })}>
                            {formatAmount(otherFee)}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.assistantFee',
                                defaultMessage: '辅料费'
                            })}>
                            {formatAmount(assistantFee)}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.adjustmentFee',
                                defaultMessage: '扣补款金额'
                            })}>
                            {formatAmount(adjustmentFee)}
                        </Description>
                    </DescriptionList>
                </Card>
                {(this.props.isDetail || this.props.page === 'confirmPi' || this.props.page === 'moreApprove') &&
                    <Card>
                        <DescriptionList size="large" title={this.props.intl.formatMessage({
                            id: 'commonDetail.baseInfo.title',
                            defaultMessage: '基本信息'
                        })}>
                            <Description key="creatorName"
                                term={this.props.intl.formatMessage({
                                    id: 'commonDetail.info.creatorName',
                                    defaultMessage: '创建人'
                                })}>
                                {this.props.detail.creatorName}
                            </Description>
                            <Description key="createTime"
                                term={this.props.intl.formatMessage({
                                    id: 'commonDetail.info.createTime',
                                    defaultMessage: '创建日期'
                                })}>
                                {formatDateTime(this.props.detail.createTime, DATETIME_FORMAT)}
                            </Description>
                            <Description key="modifierName"
                                term={this.props.intl.formatMessage({
                                    id: 'commonDetail.info.modifierName',
                                    defaultMessage: '修改人'
                                })}>
                                {this.props.detail.modifierName}
                            </Description>
                            <Description key="modifyTime"
                                term={this.props.intl.formatMessage({
                                    id: 'commonDetail.info.modifyTime',
                                    defaultMessage: '修改日期'
                                })}>
                                {formatDateTime(this.props.detail.modifyTime, DATETIME_FORMAT)}
                            </Description>
                            <Description key="abandonerName"
                                term={this.props.intl.formatMessage({
                                    id: 'commonDetail.info.abandonerName',
                                    defaultMessage: '作废人'
                                })}>
                                {this.props.detail.abandonerName}
                            </Description>
                            <Description key="abandonTime"
                                term={this.props.intl.formatMessage({
                                    id: 'commonDetail.info.abandonTime',
                                    defaultMessage: '作废时间'
                                })}>
                                {formatDateTime(this.props.detail.abandonTime, DATETIME_FORMAT)}
                            </Description>
                        </DescriptionList>
                        {
                            !this.props.isDealerUser && <Divider />
                        }
                        {
                            !this.props.isDealerUser && <DescriptionList col={1} size="large" title={this.props.intl.formatMessage({
                                id: 'commonDetail.approveInfo.title',
                                defaultMessage: '审核信息'
                            })}>
                                <Description key="approverName"
                                    term={this.props.intl.formatMessage({
                                        id: 'commonDetail.info.approverName',
                                        defaultMessage: '审核人'
                                    })}>
                                    {this.props.detail.approverName}
                                </Description>
                                <Description key="approveTime"
                                    term={this.props.intl.formatMessage({
                                        id: 'commonDetail.info.approveTime',
                                        defaultMessage: '审核时间'
                                    })}>
                                    {formatDateTime(this.props.detail.approveTime, DATETIME_FORMAT)}
                                </Description>
                            </DescriptionList>
                        }
                        {
                            !this.props.isDealerUser && <DescriptionList col={1} size="large">
                                <Description term={this.props.intl.formatMessage({
                                    id: 'commonDetail.info.approveComment',
                                    defaultMessage: '审核意见'
                                })}>
                                    {this.props.detail.approveComment}
                                </Description>
                                <Description term={this.props.intl.formatMessage({
                                    id: 'commonDetail.info.dealResult',
                                    defaultMessage: '处理结果'
                                })}>
                                    {this.props.detail.dealResult}
                                </Description>
                            </DescriptionList>
                        }
                    </Card>}
                {this.props.detail.sourceType !== expenseAdjustmentBillSourceType.其他 && <Card title={this.props.intl.formatMessage({
                    id: 'commonDetail.card.fileList.details',
                    defaultMessage: '扣补款单清单'
                })}>
                    <Table
                        className="white-space-nowrap"
                        rowKey="sourceId"
                        columns={columns}
                        pagination={false}
                        dataSource={details}
                        {...TABLE}/>
                </Card>}
                {this.props.page === 'moreApprove' && <Card title={this.props.intl.formatMessage({
                    id: 'commonDetail.card.fileList.moreApproves',
                    defaultMessage: '多级审核历史'
                })}>
                    <Table
                        className="white-space-nowrap"
                        rowKey="sourceId"
                        columns={moreColumns}
                        pagination={false}
                        dataSource={expenseAdjustmentResultDetails}
                        {...TABLE}/>
                </Card>}
                {this.props.isDetail && <Card
                    title={this.props.intl.formatMessage({
                        id: 'commonDetail.piAttachments.title',
                        defaultMessage: 'PI附件'
                    })}
                    bordered={false}>
                    {piFileList.length ? <DescriptionList col={1} size="large">
                        {piFileList}
                    </DescriptionList> : this.props.intl.formatMessage({
                        id: 'commonDetail.piAttachments.noData',
                        defaultMessage: '暂无附件'
                    })}
                </Card>}
                <Card
                    title={this.props.intl.formatMessage({
                        id: 'commonDetail.attachments.title',
                        defaultMessage: '扣补款附件'
                    })}
                    bordered={false}>
                    {fileList.length ? <DescriptionList col={1} size="large">
                        {fileList}
                    </DescriptionList> : this.props.intl.formatMessage({
                        id: 'commonDetail.attachments.noData',
                        defaultMessage: '暂无附件'
                    })}
                </Card>
            </div>
        );
    }
}

Detail.defaultProps = {
    detail: {},
    isDetail: false,
    isDealerUser: true,
};

Detail.propTypes = {
    detail: PropTypes.object,
    intl: PropTypes.object,
    isDealerUser: PropTypes.bool,
    isDetail: PropTypes.bool,
    operations: PropTypes.any,
};

export default (injectIntl(Detail));
